<!-- ./idFieldRender.vue 文件 -->
<template>
    <div>
        <!-- 自定义 -->
        <Icon v-if="state.loading == true" name="el-icon-Loading" class="is-loading" />
        <el-tag v-if="state.loading == false && state.edit === false && state.showText === null" plain class="pointer" @click="edit()" type="info">点击设置</el-tag>
        <el-tag v-if="state.loading == false && state.edit === false && state.showText !== null" plain class="pointer" @click="edit()">{{ state.showText }}</el-tag>
        <el-input v-if="state.loading == false && state.edit === true" v-model="state.value" @blur="save" placeholder="" ref="inputRef" type="number" @keyup.enter="$event.target.blur()" class="agency-fee-input" />
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx, ElInput } from 'element-plus'
import { reactive, ref, nextTick } from 'vue';
import { agencyFee } from '/@/api/backend/user/user'

// 自定义

const inputRef = ref()

// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
    renderColumn: TableColumnCtx<TableRow> // 当前列上下文数据
    renderIndex: number // 当前行号
}
const props = defineProps<Props>()

const state = reactive({
    edit: false,
    value: null,
    showText: props.renderValue ? props.renderValue + '%' : null,
    newValue: -1,
    loading: false
})

const save = () => {
    state.loading = true;
    state.edit = false;
    agencyFee({id:props.renderRow.id, agency_fee: state.value}).then((e) => {
        state.loading = false;
        if(e.code == 1){
            state.showText = (state.value == '' || state.value == 0 || state.value == null || e.data.agency_fee == 0) ? null : e.data.agency_fee + '%'
            state.newValue = e.data.agency_fee == 0 ? null : e.data.agency_fee;
        }else{

        }
        
    }).catch((err) => {
        console.log(err)
    })
}

const edit = () => {
    state.edit = true;
    state.value = state.newValue != -1 ? state.newValue : props.renderValue;
    state.value = state.value == 0 ? null : state.value;
    nextTick(() => {
        inputRef.value.focus();
    })
}

</script>

<style scoped lang="scss">
// 自定义
.pointer{
    cursor: pointer;
    user-select: none;
}
.agency-fee-input{
    width: 150px;
}
</style>